import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link } from 'react-router';
import {  Modal,Icon,Card,message,Button,Table ,Row,Col,Input,Select} from 'antd';
const { TextArea } = Input;
const Option = Select.Option;
import api from '../../api';
import {bind_change} from '../../common/State';
import {SMS_TYPE} from '../../constants/index';

export default class SmsRecord extends React.Component {
    constructor(props, context){
        super(props, context);
        let {id,tabType,curType} = this.props;
        this.state={
          id,
          visible:false,
          confirmLoading:false,
          page:1,
          total:1,
          pageSize:10,
          list:[],
          loading:true,
          content:'',
          type:'1'
        };
    }

    componentWillMount(){
      let {page} = this.state;
      let {id,tabType,curType} = this.props;
      if(tabType==curType&&id){
        this.doFetch(page)
      }
    }
    componentWillReceiveProps(nextProps){
      let {page} = this.state;
      let {id,tabType,curType,userData} = nextProps;
      this.setState({loading:true})
      if(tabType==curType&&id){
        this.doFetch({page,phone:nextProps.userData.phone})
      }
    }

    //查询短信记录
   async doFetch({page=1,phone}){
      let {id,userData} = this.props;
      phone = phone || userData.phone
      console.log(phone,"==000000000000")
      let result = await api('/user/sms/record',{phone,page});
      if(result.cd!=0){
        message.error(result.msg);
        return
      }
      this.setState({
        loading:false,
        page,
        list:result.data,
        total:result.total||1
      })
   }

    //翻页
   pageTo = ({current:page,total,pageSize}) => {
    this.setState({loading:true});
    this.doFetch({page});
   }

  async sendSms(){
      this.setState({
        confirmLoading: true
      });
      let {id,content,type} = this.state;
      let {userData} = this.props;
      if(!content){
        message.error('请输入短信内容');
        return
      }
      let result = await api('/user/sendsms',{receiverStr:userData.phone,content,type});
      if(result.cd!=0){
        message.error(result.msg);
        this.setState({
          confirmLoading: false,
        });
        return
      }
      message.success('发送成功');
      this.setState({
        visible:false,
        confirmLoading: false,
        loading:true,
        content:""
      });
      this.doFetch({page:1,phone:userData.phone});
  }

    //手工确认
    async smsConfirm(id){
      let result =  await api('/user/sendsms/confirm',{id});
      if(result.cd!=0){
        message.error(result.msg);
        return
      }
      message.success('操作成功');
      let {page} = this.state;
      this.doFetch({page});
    }
   

   
    render() {

      let {
          visible,
          confirmLoading,
          page,
          total,
          pageSize,
          list,
          loading,
          content,
          type
      } = this.state;
      let {userData} = this.props;
      return (
        <div >
          <div className='marginB10'>
              <Button type="primary" onClick={()=>{
                this.setState({visible:true})
              }} >发送短信</Button>
          </div> 
          <Table 
            bordered
            columns={this.getColumns()} 
            simple 
            dataSource={list}
            pagination={{
              current:page,
              total,
              pageSize,
              showQuickJumper : true
            }}
            loading={loading}
            onChange={this.pageTo}
            scroll={{ x: 1000 }}
            rowKey={record => record.id}
          />

          <Modal title="发送短信"
            visible={visible}
            onOk={this.sendSms.bind(this)}
            confirmLoading={confirmLoading}
            style={{width:'400px'}}
            onCancel={()=>{
              this.setState({
                visible:false,
                content:""
              })
            }}
          >
            <div className='block-detail-container'>
                <div className='height10'></div>
                <div className='d-row'>
                  <div className='d-col'>
                      <label>手机号:</label>
                      <div>{userData.phone}</div>
                  </div>
                </div>
                <div className='d-row'>
                  <div className='d-col'>
                      <label>发送内容:</label>
                      <div style={{width:'250px'}}>
                        <TextArea 
                          style={{ width:'100%' }}
                          placeholder="请输入发送内容" 
                          {...this::bind_change('content')}
                          autosize={{ minRows: 5, maxRows: 10 }} 
                        />
                        <p className='text-right'>建议不超过100个字符</p>
                      </div>
                  </div>
                </div>
                <div className='d-row'>
                  <div className='d-col middle'>
                      <label>短信类型:</label>
                      <div style={{width:'250px'}}>
                        <Select 
                          value={type} 
                          onChange={(value)=>{
                            this.setState({
                              type:value
                            })
                          }} 
                          style={{ width:'100%' }} 
                        >
                          {Object.keys(SMS_TYPE).map((key,index)=>{
                              return <Option key={index} value={key}>{SMS_TYPE[key]}</Option>
                          })}
                        </Select>
                      </div>
                  </div>
                </div>
                <div className='height20'></div>
            </div>
            
          </Modal>
        </div>
      );
    }

    getColumns(){

      let columns = [
            {
              title: '短信记录ID',
              dataIndex: 'id',
              key: 'id',
            }, {
              title: '短信内容',
              dataIndex: 'content',
              key: 'content',
              
            },
            {
              title: '短信类型',
              dataIndex: 'type',
              key: 'type',
              render:(type)=>{
                return SMS_TYPE[type]
              }
              
            }, {
              title: '创建时间',
              dataIndex: 'create_at',
              key: 'create_at',
            },{
              title: '系统完成时间',
              dataIndex: 'complete_at',
              key: 'complete_at',
            }, {
              title: '短信状态',
              dataIndex: 'status',
              key: 'status',
              render:(status)=>{
                return status==0?'未完成':status==1?'已完成':'未知';
              }
            },{
              title:'操作',
              key: 'action',
              fixed: 'right',
              width:100,
              render: (record) =>{
                if(record.status==0){
                  return (
                    <a 
                      onClick={this.smsConfirm.bind(this,record.id)} 
                      href='javascript:void 0;'
                    >手工确认</a>
                  )
                }
              }
            }
        ];

        return columns
    }

    
}

SmsRecord.contextTypes= { router: React.PropTypes.object.isRequired};

